@import "./mixins/reset";
@import "./mixins/public";

html, body{
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  background:#F7F7F7;
  color: #73879C;
}

.mt_5{margin-top:5px;}
.mt_10{margin-top:10px;}
.mb_5{margin-bottom:5px;}
.mb_10{margin-bottom:10px;}
.ml_5{margin-left:5px;}
.ml_10{margin-left:10px;}
.mr_5{margin-right:5px;}
.mr_10{margin-right:10px;}

#wrapper{
  filter: blur(5px);
  transition-duration: .1s;
  &.loaded{filter: blur(0);}
}

#adminBody{
  position: absolute;
  width: 100%;
  min-height: 100%;
  padding-left:230px;
}

#kd_leftmenu{
  width: 230px;
  height: 100%;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100%;
  background:#2A3F54;
  padding-bottom:60px;
  position:fixed;
  left:0;color:#fff;
  .nav_title{
    height:54px; 
    line-height:54px;
    font-size: 22px;
    text-align:center;
  }
  .avatar{
    width: 35%;
    img{width:50px;
      height: 50px;
      margin-top:20px;
      margin-left:20px;
      border:4px solid #fff;
      border-radius:50%;
    }
  }
  .profile{margin-bottom:30px;}
  .profile_info{
    width: 65%;
    padding:25px 10px 10px;
    line-height:20px;
    color:#BAB8B8;
    font-size: 12px;
    h2{font-size:14px;
      color: #ECF0F1;
      height:20px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
  }
  .side_menu{
    font-size: 13px;
    margin-bottom:35px;
    h3{font-size:12px;
      padding-left:15px;
    }
  }
  .sidemenus{
    margin-top:10px;
    .flevel{
      color:#fff;
      cursor:pointer;
      border-right: 5px solid #2A3F54;
      &.on{border-right:5px solid #1ABB9C;}
    }
    a{display: block;
      color: #E7E7E7;
      text-decoration:none;
      &:hover{color:#F2F5F7;}
    }
  }
  .flevel{
    & > a{padding:10px 15px;
      position:relative;
      margin-bottom:6px;
    }
    &.on > a, &:hover > a{
      background:linear-gradient(#334556,#2C4257),#2A3F54;
      box-shadow:rgba(0,0,0,.25) 0 1px 0, inset rgba(255,255,255,.16) 0 1px 0;
    }
    &.on > .child_menu{display:block;}
  }
  .child_menu{
    display: none;
    border-bottom: 1px solid #233547;
    padding-bottom:6px;
    li{padding-left: 36px;
      position:relative;
      &:after {
        content: "";
        border-left: 1px solid #425668;
        position: absolute;
        top: 0;bottom: 0;
        left: 27px;
      }
      &:before {
        background: #425668;
        content: "";
        width: 8px;
        height: 8px;
        left: 23px;
        margin-top: 15px;
        border-radius: 50%;
        position: absolute;
        z-index: 1;
      }
      &.on, &:hover{background:rgba(255,255,255,.05);}
      a{padding:10px;}
    }
  }
  .side_foot{
    background:#172D44;
    position:fixed;
    bottom:0;left:0;
    z-index:1;
    width: 230px;
    display: flex;
    justify-content:space-around;
    .tooltip{
      position: absolute;
      left:50%; top:-20px;
      width:40px;
      margin-left:-20px;
      background: #000;
      font-size: 12px;
      height: 22px;
      line-height:22px;
      border-radius:3px;
      color: #fff;
      transition-duration:.1s;
      opacity:0;
      z-index:-1;
      &::after{
        content: '';
        position: absolute;
        bottom:-6px;left:50%;
        margin-left:-6px;
        border-top:6px solid #000;
        border-left:6px solid transparent;
        border-right:6px solid transparent;
      }
    }
    .btn{color: #5A738E;
      position: relative;
      height: 32px;
      padding-top:4px;
      padding-bottom:4px;
      flex-grow:1;
      &:hover{
        color:#fff;
        .tooltip{
          top:-30px;
          opacity:1;
          z-index:1;
        }
      }
    }
    .icon{
      display: block;
      margin:0 auto;
      font-size: 24px;
    }
  }
}

#kd_header{
  background: #EDEDED;
  border-bottom: 1px solid #D9DEE4;
  position: relative;
  z-index: 3;
  height: 55px;
  .menu_toggle{
    position: absolute;
    left:15px;top:15px;
    width: 22px;
    height:22px;
    line-height:3px;
    &:before, &:after, & .icons{
      content:'';
      display:inline-block;
      width: 100%;
      height: 3px;
      background: #5A738E;
      border-radius:3px;
    }
  }
  .noticeInfo{
    width: 44px;
    height: 54px;
    line-height: 60px;
    text-align: center;
    &:hover{background:#D9DEE4;}
    .infoNum{
      display: inline-block;
      width: 15px;
      height:15px;
      background: #172D44;
    }
    .badge{
      position:absolute;
      top:5px;right:2px;
      background:#1ABB9C;
      border-radius: 10px;
      height: 20px;
      line-height:20px;
      padding-left:7px;
      padding-right:7px;
      font-size:12px;
      color: #fff;
    }
  }
  .notice{
    &.on{
      .noticeInfo{background:#D9DEE4;}
      .pullMenu{display:block;}
    }
  }
  .pullMenu{
    display:none;
    position: absolute;
    top:54px;right:0;
    background:#fff;
    border:1px solid #D9DEE4;
    border-radius: 4px;
    border-top-left-radius:0;
    border-top-right-radius:0;
  }
  .noticelist{
    width: 300px;
    padding: 6px;
    li{background:#f7f7f7;
      padding: 5px;
      margin-top:6px;
      color: #5A738E;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      &:first-child{margin-top:0;}
      &:hover{color: #262626;}
      .time{
        position: absolute;
        font-style:italic;
        font-weight:bold;
        right: 10px;
      }
    }
    span{
      line-height:1.42857143;
      white-space:normal;
      @extend .vertop;
    }
    .image{
      width: 30px;
      height: 30px;
      overflow: hidden;
      margin-right: 10px;
      float: left;
      img{display:block;
        width: 100%;
      }
    }
    .name{font-size:14px;}
    .message{float: left;
      max-height:32px;
      text-indent:40px;
      margin-top:-13px;
    }
    .seeall{display:block;
      line-height: 26px;
      color: #5A738E;
      text-align: center;
    }
  }
  .userPanel{
    &.on{
      .userProfile{background:#D9DEE4;}
      .pullMenu{display:block;}
    }
    .pullMenu{
      border-bottom-right-radius:0;
      width: 100%;
    }
    li{
      &:hover{
        background:#f5f5f5;
        a{color:#262626;}
      }
      a{display: block;
        height: 36px;
        line-height:16px;
        text-decoration:none;
        padding:10px 20px;
      }
      .icons{

      }
    }
  }
  .userProfile{
    padding: 13px 15px;
    position: relative;
    cursor: pointer;
    &:hover{background:#D9DEE4;}
    .avatar{
      line-height: 30px;
      color: #515356;
    }
    img{width: 30px;
      height:30px;
      border-radius:50%;
      margin-right:10px;
    }
    .arrowDown{
      display: inline-block;
      width: 10px;
      height:15px;
      line-height:15px;
      vertical-align:middle;
    }
  }
}

#mainContain{
  padding-bottom:40px;
  .frameBox{padding:10px;}
  .pageTitle{
    height: 40px;
    margin-bottom:10px;
    .titleLeft{
      line-height: 40px;
      font-size:20px;
    }
    .titleRight{margin-top: 5px;}
    .formControl{
      width: 200px;
      height: 30px;
      line-height:20px;
      padding:5px 15px;
      box-shadow:inset 0 1px 0px rgba(0,0,0,0.075);
      border:1px solid rgba(221,226,232,0.5);
      border-top-left-radius:15px;
      border-bottom-left-radius:15px;
      background: #fff;
      font-size: 14px;
    }
    .search{
      height: 30px;
      line-height:20px;
      padding:5px 10px;
      border-top-right-radius:15px;
      border-bottom-right-radius:15px;
      box-shadow:inset 0 1px 0px rgba(0,0,0,0.075);
      border:1px solid rgba(221,226,232,0.5);
      border-left:0;
      margin-left:-1px;
      background:#fff;
      text-decoration:none;
      color:#93A2B2;
      cursor:pointer;
      &:hover{background:#e6e6e6;}
    }
  }
}

#footer{
  position:absolute;
  bottom:0;left:230px;
  right:0;z-index:1;
  background: #fff;
  padding: 10px 20px;
  text-align: right;
}


















